import CommentImagePreview from '@/components/Comment/ImagePreview';
import CommentChoice from '@/components/Comment/List/choice';
import GoodsSpecSelect from '@/components/GoodsSpecSelect';
import ToTop from '@/components/toTop';
import SharePageToWxFriend from '@/components/sharePageToWxFriend';
import { sourceUrl } from '@/config';
import { AddressType, getGoodsDefaultSendAddress, transformAddress } from '@/dataTransfer/location';
import { checkProductIsSoldOut } from '@/dataTransfer/product';
import rightGrayImg from '@/images/common/rightGray.svg';
import cartImg from '@/images/standBar/cart.png';
import homeImg from '@/images/standBar/home.png';
import serviceImg from '@/images/standBar/service.png';
import selectedImg from '@/mainSubPack/images/goodsDetail/selected.png';
import { debounce } from '@/utils/helper';
import { useShowLoading } from '@/utils/hooks/useShowLoading';
import utils from '@/utils/index';
import { durationTimeTransform } from '@/utils/time';
import { Image, Swiper, SwiperItem, Text, View, Button } from '@tarojs/components';
import Taro, { useDidShow, usePageScroll, useRouter } from '@tarojs/taro';
import classNames from 'classnames';
import React, { useCallback, useEffect, useRef, useState } from 'react';
import { connect } from 'react-redux';
import ActivitySelect from './activitySelect';
import AddressSelect from './addressSelect';
import DistributeInfo from './distributeInfo';
import './index.scss';
import Tabs from './tabs';

let tabsList = [
  {
    label: '商品',
    value: 0,
    id: '#idProduct',
    distance: 0,
  },
  {
    label: '评价',
    value: 1,
    id: '#idEvaluation',
  },
  {
    label: '详情',
    value: 2,
    id: '#idDetail',
  },
];

let timer = null;
const TOP_BAR_HEIGHT = utils.getSizeByScale(90);

const TransportFeeInfo = ({ data = {} }) => {
  let { canBuy, fee } = data;
  let txt = '待下单时确认';
  if (Object.keys(data).length > 0) {
    if (canBuy) {
      if (fee) {
        txt = '在线支付运费' + fee + '元';
      } else {
        txt = '免运费';
      }
    }
  }
  return <View className="black3">{txt}</View>;
};

const PreferentialInfo = ({ manjian = {}, couponList, setShowActivitySel }) => {
  let data = [];
  if (couponList.length > 0) {
    data.push({
      type: 1,
      txt: couponList[0].discountString,
    });
  }
  if (manjian.activityType == 2) {
    data.push({
      type: manjian.activityType,
      txt: manjian.content,
    });
  }

  let dom = null;
  dom =
    data.length > 0 &&
    data.map((item, index) => {
      let lb = '',
        txt = '',
        isLbt = false;
      switch (item.type) {
        case 1:
          lb = '领券';
          txt = item.txt;
          isLbt = true;
          break;
        case 2:
          lb = '满减';
          txt = item.txt;
          break;
        case 4:
          lb = '多买优惠';
          txt = '满2件，总价打9折';
          break;
        case 5:
          lb = '包邮';
          txt = '实付满88元部分地区包邮';
          break;
        default:
          break;
      }
      return (
        <View
          className={'flex-row--center pline ' + (index == 0 ? 'topLine' : 'mt24')}
          onClick={() => setShowActivitySel(true)}
        >
          <View className="label txt28 gray">{index == 0 ? '优惠' : ''}</View>
          <View className="cont flex-row--center">
            <View className="lb flex-row-center-center customePageStyle customeSalesPromotionLabelStyle">
              {lb}
            </View>
            <View
              className={
                isLbt
                  ? 'lbt flex-row-center-center customePageStyle customeSalesPromotionLabelStyle'
                  : 'text txt24 txtDot'
              }
            >
              {txt}
            </View>
          </View>
          <View className="op flex-row-center-center">
            {index == 0 && <Image className="right-icon" src={rightGrayImg} />}
          </View>
        </View>
      );
    });
  return <View className={'preferential ' + (data.length > 0 ? '' : 'hidden')}>{dom}</View>;
};

const TimeLine = ({ leftTimeSM = 0 }) => {
  const [timeObj, setTimeObj] = useState({});
  const transTime = () => {
    let curTimeSM = leftTimeSM;
    setInterval(() => {
      curTimeSM = curTimeSM - 1000;
      if (curTimeSM >= 0) {
        let tObj = durationTimeTransform(curTimeSM);
        setTimeObj({ ...tObj });
      }
    }, 1000);
  };
  useEffect(() => {
    transTime();
  }, [leftTimeSM]);
  return (
    <View className="timeLine flex-row--center">
      <View className="day">{timeObj.day != undefined ? timeObj.day + '天' : ''}</View>
      <View className="wbn flex-row-center-center customePageStyle">
        {timeObj.hour != undefined ? timeObj.hour : ''}
      </View>
      <View className="diliver flex-row-center-center">:</View>
      <View className="wbn flex-row-center-center customePageStyle">
        {timeObj.minute != undefined ? timeObj.minute : ''}
      </View>
      <View className="diliver flex-row-center-center">:</View>
      <View className="wbn flex-row-center-center customePageStyle">
        {timeObj.second != undefined ? timeObj.second : ''}
      </View>
    </View>
  );
};

const GoodsDetail = ({
  loading,
  dispatch,
  productDetail = {},
  curProduct = {},
  productNumInCart = null,
  allAddresses,
  freight,
  couponList = [],
}) => {
  useShowLoading(loading);
  const [selOptionValues, setSelOptionValues] = useState([]);
  const [skuInfo, setSkuInfo] = useState({});
  const [visible, setVisible] = useState(false);
  const [needSkuBy, setNeedSkuBy] = useState('');
  const [currentTab, setCurrentTab] = useState(0);
  const [scrollTop, setScrollTop] = useState(0);

  const [showAddrList, setShowAddrList] = useState(false);
  const [selectedAddress, setSelectedAddress] = useState(undefined);

  const [showActivitySel, setShowActivitySel] = useState(false);
  const [showDistributeInfo, setShowDistributeInfo] = useState(false);

  const curSelOptions = useRef([]);

  const router = useRouter();
  const { params = {} } = router;

  // 获取所有 收货地址
  useDidShow(() => {
    // 清除运费
    // dispatch({
    //   type: 'productList/setFreight',
    //   payload: undefined,
    // });
    // 未登录, 不请求
    if (!utils.getToken()) {
      return;
    }

    dispatch({ type: 'giftCard/allAddressesModel', payload: { setDefaultAddress: false } });
  });

  useDidShow(() => {
    dispatch({
      type: 'productList/setProductDetail',
      payload: {},
    });
    dispatch({
      type: 'productList/getDetail',
      payload: { ...params },
    });
  });

  // 获取用户选择地址
  useEffect(() => {
    let list = allAddresses;

    // 如果没有登录, 则获取经纬度, 即把用户地址列表为空数组
    if (!utils.getToken()) {
      list = [];
    }
    if (!list) {
      return;
    }

    // list 为空数组时, 获取的是 当前定位
    // 否则按照 上次选择 => 默认地址 => 当前定位 顺序选择
    getGoodsDefaultSendAddress(dispatch, list)
      .then((data) => {
        setSelectedAddress(data);
      })
      .catch((e) => {
        console.warn(e);

        setSelectedAddress({ type: AddressType.failed });
      });
  }, [allAddresses]);

  useEffect(() => {
    if (!selectedAddress) {
      return;
    }

    if (!productDetail?.id) {
      return;
    }

    dispatch({
      type: 'productList/getFreight',
      payload: {
        addressId: selectedAddress.id,
        adCode: selectedAddress.adCode ?? selectedAddress.adcode,
        productReleaseId: productDetail.id,
        productReleaseVariantId: skuInfo.id,
      },
    });
  }, [skuInfo]);

  // 商品已下架
  const isOffShelf = productDetail?.shelvesFlag === 2;
  // 商品无库存
  const isSoldOut = checkProductIsSoldOut(productDetail, 'inventoryQuantity');
  // 商品此地区无货
  const isDeliveryDisabled = freight && freight?.canBuy !== 1;

  //商品主图
  const productMainImage =
    productDetail?.mediaList?.length > 0
      ? productDetail?.mediaList[0]?.url?.indexOf('http') === 0
        ? productDetail?.mediaList[0]?.url
        : sourceUrl + productDetail?.mediaList[0]?.url
      : '';
  //页面路径
  const pagePath = '/mainSubPack/goodsDetail/index' + '?' + 'id=' + productDetail?.id;

  const handleTabChanged = (index) => {
    setCurrentTab(index);
    Taro.pageScrollTo({ scrollTop: tabsList[index].distance + 1 });
  };

  usePageScroll((e) => {
    let gapTime = 100;
    timer && clearTimeout(timer);
    timer = setTimeout(function () {
      setScrollTop(e.scrollTop);
    }, gapTime);
    if (e.scrollTop > tabsList[2].distance) {
      currentTab != 2 && setCurrentTab(2);
    } else if (e.scrollTop > tabsList[1].distance) {
      currentTab != 1 && setCurrentTab(1);
    } else {
      currentTab != 0 && setCurrentTab(0);
    }
  });

  useEffect(() => {
    setTimeout(() => {
      if (Object.keys(productDetail).length > 0) {
        Taro.createSelectorQuery()
          .select('#idEvaluation')
          .boundingClientRect(function (rect) {
            if (rect) {
              tabsList[1].distance = rect.top - TOP_BAR_HEIGHT;
            }
          })
          .exec();
        Taro.createSelectorQuery()
          .select('#idDetail')
          .boundingClientRect(function (rect) {
            if (rect) {
              tabsList[2].distance = rect.top - TOP_BAR_HEIGHT;
            }
          })
          .exec();
      }
    }, 100);
  }, [productDetail]);

  const getSkuSel = useCallback(({ selOptions, skuData }) => {
    curSelOptions.current = selOptions;
    let optionValues = selOptions.map((op) => op.value);
    setSelOptionValues(optionValues);
    setSkuInfo({ ...skuData });
  });

  const goShoppingMall = () => {
    let url =
      '/mainSubPack/shoppingMall/index?orgId=' +
      productDetail.storeId +
      '&merchantId=' +
      productDetail.merchantId;
    Taro.navigateTo({
      url,
    });
  };

  const goCartPage = () => {
    if (!utils.getToken()) {
      Taro.navigateTo({
        url: '/pages/other/login/index',
      });
      return;
    }
    Taro.navigateTo({ url: '/pages/mainPages/cartSin/index' });
  };

  const getProductCouponList = () => {
    dispatch({
      type: 'giftCard/selectProductCouponList',
      payload: { productReleaseId: productDetail.id, orgId: productDetail.storeId, type: 1 },
    });
  };

  const getProductTotalNum = () => {
    dispatch({
      type: 'productList/getProductTotalNum',
      payload: { merchantId: productDetail.merchantId, orgId: productDetail.storeId, type: 1 },
    });
  };

  useEffect(() => {
    if (Object.keys(productDetail).length > 0 && utils.getToken()) {
      getProductCouponList();
      getProductTotalNum();
    }
  }, [productDetail]);

  useEffect(() => {
    return () => {
      dispatch({
        type: 'productList/setCurProduct',
        payload: {},
      });
      dispatch({
        type: 'productList/setProductDetail',
        payload: {},
      });
      dispatch({
        type: 'productList/setProductTotalNum',
        payload: { productNumInCart: null },
      });
    };
  }, []);

  const handleSelectSpec = (skuBy = 'sku') => {
    if (isSoldOut || isOffShelf || isDeliveryDisabled) {
      return;
    }
    setNeedSkuBy(skuBy);
    setVisible(true);
  };

  const addToCart = (num) => {
    if (isSoldOut || isOffShelf || isDeliveryDisabled) {
      return;
    }

    dispatch({
      type: 'productList/addProduct',
      payload: {
        productReleaseId: productDetail.id,
        productVariantReleaseId: skuInfo.id,
        num: num,
        merchantId: productDetail.merchantId,
        orgId: productDetail.storeId,
        orgName: productDetail.orgName,
        favouredId: skuInfo.activityId,
        favouredType: skuInfo.type,
        type: 1,
      },
    }).then((res) => {
      if (res.code === '1') {
        getProductTotalNum();
        Taro.showToast({
          title: '成功加入购物车',
          icon: 'success',
          duration: 1500,
        });
      } else {
        Taro.showToast({
          title: res.message || '加入购物车失败,请重试',
          icon: 'none',
          duration: 1500,
        });
      }
    });
  };

  const handleAddToCart = debounce(() => {
    if (isSoldOut || isOffShelf || isDeliveryDisabled) {
      return;
    }

    if (!utils.getToken()) {
      Taro.navigateTo({
        url: '/pages/other/login/index',
      });
      return;
    }
    if (productDetail.isNeedChoice) {
      handleSelectSpec('cart');
    } else {
      addToCart(1);
    }
  });

  const buyNow = (num) => {
    let url =
      '/orderSubPack/confirmOrder/index?buyNow=1&merchantId=' +
      productDetail.merchantId +
      '&orgId=' +
      productDetail.storeId +
      '&type=1';

    // 设置购买地址
    if (selectedAddress?.id) {
      dispatch({
        type: 'productCar/setDefaultAddress',
        payload: selectedAddress,
      });
    }
    dispatch({
      type: 'productCar/setBuyNow',
      payload: {
        num: num,
        productReleaseId: productDetail.id,
        merchantId: productDetail.merchantId,
        orgName: productDetail.orgName,
        orgId: productDetail.storeId,
        productVariantReleaseId: skuInfo.id,
        favouredId: skuInfo.activityId,
        favouredType: skuInfo.type,
      },
    });
    Taro.navigateTo({ url });
  };

  const handleBuyNow = debounce(() => {
    if (isSoldOut || isOffShelf || isDeliveryDisabled) {
      return;
    }
    Taro.verifyLogin()
    handleSelectSpec('buy');
  });

  const filterRichTextContent = (content = '') => {
    // if (!content) return '';
    return content.toString().replace(/\<img\s+/gi, `<img mode="widthFix" `);
  };

  return (
    <View
      className={classNames(
        'mainPage-goodsDetail',
        { 'spec-opened': visible },
        { bottomLeaveH: Taro.$bottomHight },
      )}
    >
      <AddressSelect
        isOpened={showAddrList}
        handleClose={(address) => {
          setShowAddrList(false);

          if (address) {
            setSelectedAddress(transformAddress(address));
          }
        }}
        allAddresses={allAddresses}
        selectedAddress={selectedAddress}
      />

      <CommentImagePreview />
      <GoodsSpecSelect
        visible={visible}
        setVisible={setVisible}
        needSkuBy={needSkuBy}
        dispatch={dispatch}
        getSkuSel={getSkuSel}
        productDetail={productDetail.id == params.id ? productDetail : {}}
        curProduct={curProduct}
        selectedAddress={selectedAddress}
        curOptions={curSelOptions.current}
        productNumInCart={productNumInCart}
        refreashNumAfterAddSuccess={getProductTotalNum}
      />

      <ActivitySelect
        isOpened={showActivitySel}
        merchantId={productDetail.merchantId}
        orgId={productDetail.storeId}
        handleClose={() => setShowActivitySel(false)}
        manjian={{
          activityId: productDetail.activityId,
          activityType: productDetail.activityType,
          content: productDetail.content,
          startTime: productDetail.startTime,
          endTime: productDetail.endTime,
        }}
        couponList={couponList}
      />

      <DistributeInfo
        isOpened={showDistributeInfo}
        handleClose={() => setShowDistributeInfo(false)}
        distributionWay={productDetail.distributionWay ?? []}
        area={productDetail.area || ''}
        storeId={productDetail.storeId}
      />

      {!Taro.$isH5 && (
        <SharePageToWxFriend
          top="1196"
          message={{ title: productDetail.title, path: pagePath, imageUrl: productMainImage }}
        />
      )}

      <ToTop top="2856" />

      <View className="header">
        <View
          className={classNames('quickMenu', scrollTop > 30 && 'show')}
          style={{
            background:
              scrollTop > 30
                ? 'rgba(255, 255, 255,' + (scrollTop / 300 > 0.9 ? '1' : scrollTop / 300) + ')'
                : 'none',
          }}
        >
          <Tabs tabsList={tabsList} getCurrentTab={handleTabChanged} defaultTab={currentTab} />
        </View>
      </View>

      {!productDetail?.mediaList?.length ? null : (
        <Swiper
          className="goods-images"
          indicatorColor="rgba(245,245,245,0.5)"
          indicatorActiveColor="#999"
          circular
          indicatorDots
          autoplay
          id="idProduct"
        >
          {productDetail &&
            productDetail.mediaList &&
            productDetail.mediaList.length > 0 &&
            productDetail.mediaList.map((item, index) => (
              <SwiperItem key={'productSwiper' + '_' + index}>
                <Image
                  mode="widthFix"
                  className="inner"
                  src={item.url.indexOf('http') === 0 ? item.url : sourceUrl + item.url}
                  key={'productPicture' + '_' + index}
                />
              </SwiperItem>
            ))}
        </Swiper>
      )}

      <View
        className={
          'discountLine customePageBackgroundStyle ' + (skuInfo.type == '3' ? '' : 'hidden')
        }
      >
        <View className="discountCtx flex-row-spaceBetween bgImg">
          <View className="leftPrice flex-column">
            <View className="limitPrice flex-row--end">
              <View className="price">
                <Text className="zUnit">¥</Text>
                <Text className="zNum">{parseInt(skuInfo.price)}</Text>
                <Text className="zUnit">{utils.getDotStr(skuInfo.price)}</Text>
                <View className="discountFlag flex-row-center-center customePageStyle">
                  限时折扣
                </View>
              </View>
            </View>
            <View className="oldPrice">¥{skuInfo.cost}</View>
          </View>
          <View className="rightTime flex-column--end">
            <View className="txt">距离结束还剩</View>
            <TimeLine leftTimeSM={skuInfo.leftTimeSM} />
          </View>
        </View>
      </View>

      <View className="goods-summary">
        <View className={'priceLine customePageStyle ' + (skuInfo.type != '3' ? '' : 'hidden')}>
          <View className="price">
            <Text className="zUnit">¥</Text>
            <Text className="zNum">
              {skuInfo.hasOwnProperty('price') == true
                ? parseInt(skuInfo.price)
                : parseInt(productDetail.price || 0)}
            </Text>
            <Text className="zUnit">
              {skuInfo.hasOwnProperty('price') == true
                ? utils.getDotStr(skuInfo.price)
                : utils.getDotStr(productDetail.price || 0)}
            </Text>
            <Text
              className={classNames(
                'zMore',
                (skuInfo.hasOwnProperty('price') == true || productDetail.isOnlyOne) && 'hidden',
              )}
            >
              起
            </Text>
          </View>
        </View>
        <View className="name">{productDetail.title}</View>
        {productDetail.subTitle && <View className="subTitle">{productDetail.subTitle}</View>}
        {productDetail.descript && <View className="desc omit">{productDetail.descript}</View>}
      </View>

      <View className="pricePart row">
        <View
          className={classNames('oneLine flex-row-spaceBetween-center', {
            // 如果是仅仅支持自提商品, 则不需要显示运费
            hidden:
              productDetail.distributionWay?.length === 1 &&
              productDetail.distributionWay[0] === '3',
          })}
        >
          <View className="flex-row--center txt28">
            <View className="label gray">运费</View>
            <TransportFeeInfo data={freight} />
          </View>
          <View className="flex-row-end-center txt24 gray">
            <View className="mr10">已售</View>
            <View>{productDetail.saleNumber || 0}件</View>
          </View>
        </View>
        <PreferentialInfo
          manjian={{ activityType: productDetail.activityType, content: productDetail.content }}
          couponList={couponList}
          setShowActivitySel={setShowActivitySel}
        />
      </View>

      <View className="purchase row">
        <View className="oneLine flex-row-spaceBetween-center" onClick={() => handleSelectSpec()}>
          <View className="flex-row--center">
            <View className="label txt28 gray">规格</View>
            {selOptionValues.length > 0 ? (
              <Text className="sku txt28">{selOptionValues.join('+')}</Text>
            ) : (
              <Text className="txt28">请选择商品规格</Text>
            )}
          </View>
          <Image className="right-icon" src={rightGrayImg} />
        </View>
        <View
          className={
            'oneLine flex-row-spaceBetween-center ' + (productDetail.params ? '' : 'hidden')
          }
          onClick={() => {}}
        >
          <View className="flex-row--center">
            <Text className="label txt28 gray">参数</Text>
            <Text className="txt28">{productDetail.params || ''}</Text>
          </View>
          <Image className="right-icon" src={rightGrayImg} />
        </View>
      </View>

      <View className="distribute row">
        <View
          className="oneLine flex-row-spaceBetween-center"
          onClick={() => setShowDistributeInfo(true)}
        >
          <View className="lp flex-row--center">
            <View className="label txt28 gray">配送</View>
            {productDetail.distributionWay?.length > 0 && (
              <>
                {productDetail.distributionWay
                  .sort((a, b) => a - b)
                  .map((dbway) => {
                    if (dbway == '1') {
                      return (
                        <View className="flex-row--center mr48">
                          <Image className="supportIcon" src={selectedImg} />
                          <Text className="txt24">物流配送</Text>
                        </View>
                      );
                    } else if (dbway == '3') {
                      return (
                        <View className="flex-row--center mr48">
                          <Image className="supportIcon" src={selectedImg} />
                          <Text className="txt24">到店自提</Text>
                        </View>
                      );
                    }
                  })}
              </>
            )}
          </View>
          <Image className="right-icon" src={rightGrayImg} />
        </View>
        <View
          className={classNames('oneLine flex-row-spaceBetween-center', {
            hide: !selectedAddress?.fullAddress,
          })}
          onClick={() => {
            if (!utils.getToken()) {
              Taro.navigateTo({
                url: '/pages/other/login/index',
              });
              return;
            }
            setShowAddrList(true);
          }}
        >
          <View className="flex-row--center">
            <View className="label txt28 gray">送至</View>
            <Text className="txt28 txtDot addrSendTo">{selectedAddress?.fullAddress ?? ''}</Text>
          </View>
          <Image className="right-icon" src={rightGrayImg} />
        </View>
      </View>

      <View className="evaluation row" id="idEvaluation">
        <View className="lableLine">
          <Text className="label txt32">商品评价</Text>
        </View>
        <CommentChoice topicId={params.id} type={1} appId="thjs_shop_product">
          <View className="evaluationCtx">
            <View className="evaluationItem">暂无评价，快来抢沙发吧</View>
          </View>
        </CommentChoice>
      </View>

      <View className="sell row">
        <View className="picture">
          {productDetail.orgLogo && <Image className="logo" src={productDetail.orgLogo} />}
        </View>
        <View className="center flex-column-spaceBetween">
          <View className="title txt28 txtDot">{productDetail.orgName || ''}</View>
          {productDetail.isRenzheng && (
            <View className="rzbq flex-row-center-center">企业认证</View>
          )}
        </View>
        <View className="shopBtn flex-row-center-center txt24" onClick={goShoppingMall}>
          店铺首页
        </View>
      </View>

      <View className="goods-detail row" id="idDetail">
        <View
          className="detail"
          dangerouslySetInnerHTML={{
            __html: filterRichTextContent(productDetail.bodyHtml),
          }}
        ></View>
      </View>

      <View className="priceAppend row">
        <View className="lableLine">
          <Text className="label txt32">价格说明</Text>
        </View>
        <View className="txtLine txt22 gray">
          1.划线价格，指商品或服务的门市价、服务提供商的指导价、零售价或该商品或服务曾经展示过的销售价等，并非原价；产品信息实时更新、市场价格波动等原因可能导致价格与您预订时展示的价格不一致，该价格仅供您参考。
        </View>
        <View className="txtLine txt22 gray">
          2.未划线价格，指商品或服务的实时标价，为在划线价基础上计算的优惠金额。具体成交价格根据商品或服务参与的活动，或会员使用优惠券等具体情况发生变动，最终以订单结算价格为准。
        </View>
        <View className="txtLine txt22 gray">
          3.此说明仅当出现价格比较时有效。若服务提供商单独对划线价格进行说明的，以服务提供商的说明为准。如有疑问，您可以在预订前联系客服咨询。
        </View>
      </View>

      {isOffShelf && (
        <View className={'off-shelf' + (Taro.$bottomHight ? ' tmgbH' : '')}>
          <View className="off-shelf-txt">商品已经下架啦～</View>
        </View>
      )}

      {!isOffShelf && isDeliveryDisabled && (
        <View className={'delivery-disabled' + (Taro.$bottomHight ? ' tmgbH' : '')}>
          <View className="delivery-disabled-txt">所选地区暂不支持配送，非常抱歉</View>
        </View>
      )}

      {Object.keys(productDetail).length > 0 && (
        <View className="bottom flex-column">
          <View
            className={classNames('bottomCtx flex-row-spaceBetween-center', {
              offShelf: isOffShelf,
              deliveryDisabled: isDeliveryDisabled,
            })}
          >
            <View
              className={
                'tabs ' +
                (Taro.$isH5 ? 'flex-row-spaceAround-center' : 'flex-row-spaceBetween-center')
              }
            >
              <View className="tab flex-column--center" onClick={() => utils.goHomePage(dispatch)}>
                <Image className="icon" src={homeImg} />
                <View className="name">首页</View>
              </View>
              {!Taro.$isH5 && (
                <Button
                  className="tab flex-column--center nobtn"
                  openType="contact"
                  show-message-card="true"
                  send-message-title={productDetail.title}
                  send-message-path={pagePath}
                  send-message-img={productMainImage}
                >
                  <Image className="icon" src={serviceImg} />
                  <Text className="name">客服</Text>
                </Button>
              )}
              <View className="tab flex-column--center" onClick={goCartPage}>
                <Image className="icon" src={cartImg} />
                <View className="name">购物车</View>
                {productNumInCart && productNumInCart > 0 && (
                  <View
                    className={[
                      'gwcNum customePageBackgroundStyle',
                      productNumInCart > 9 && 'two',
                      productNumInCart > 99 && 'three',
                    ].join(' ')}
                  >
                    {productNumInCart > 99 ? '99+' : productNumInCart}
                  </View>
                )}
              </View>
            </View>

            <View className="ops flex-row-center-center">
              {isSoldOut ? (
                <View className="sold-out-btn flex-row-center-center">
                  <View className="sold-out-btn-txt">已售罄</View>
                </View>
              ) : (
                <>
                  <Text
                    className="left btn flex-row-center-center customePageStyleBg20 customePageStyle"
                    onClick={handleAddToCart}
                  >
                    加入购物车
                  </Text>
                  <Text
                    className="right btn flex-row-center-center customePageBackgroundStyle"
                    onClick={handleBuyNow}
                  >
                    立即抢购
                  </Text>
                </>
              )}
            </View>
          </View>
          {Taro.$bottomHight && <View className="bottomHt"></View>}
        </View>
      )}
    </View>
  );
};
export default connect(({ productList, loading, giftCard }) => ({
  productDetail: productList.productDetail,
  curProduct: productList.curProduct,
  productNumInCart: productList.productNumInCart,
  loading,
  allAddresses: giftCard.allAddresses,
  freight: productList.freight,
  couponList: giftCard.selectProductCouponList,
}))(GoodsDetail);
